<template>
  <div>
    <p>
      <button @click="changeHashModeParams">修改hash query > tab1</button>
    </p>
    <div class="tabs">
      <p class="item" :class="{ active: currentTab === 'tab1' }">tab1</p>
      <p class="item" :class="{ active: currentTab === 'tab2' }">tab2</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watchEffect } from 'vue';
// https://vueuse.org/core/useUrlSearchParams/?foo=bar&vueuse=awesome
import { useUrlSearchParams } from '@vueuse/core';

const currentTab = ref();
const hashParams = useUrlSearchParams('history');

watchEffect(() => {
  currentTab.value = hashParams.tab || 'tab1';
});

function changeHashModeParams() {
  hashParams.tab = 'tab1';
}

/*
  经测试 修改query的参数，参数的变化可以映射到 hashParams 中，从而可以使url与页面建立关联
 */
</script>

<style scoped>
.tabs {
  display: flex;
  width: 300px;
}

.item {
  padding: 3px 8px;
}

.item.active {
  color: red;
}
</style>
